import React from 'react';
import { inject, observer } from 'mobx-react';
import { WeaInputSearch } from 'ecCom';
import { toJS } from 'mobx';

@inject('docAddStore')
@observer
class AddTab extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      treeData: [],
      value: '',
    };
  }
  componentDidMount() {
  }
  componentWillReceiveProps() {
    const { docAddStore } = this.props;
    const { treeDatas, selectedDomId } = docAddStore;
    if (selectedDomId.toJS().length === 0) {
      this.setState({ treeData: [] });
    } else {
      treeDatas.toJS().forEach((item) => {
        let tempResult = [];
        let temptreeData = [];
        tempResult = this.getItem(item, selectedDomId.toJS());
        tempResult.forEach((iteml) => {
          if (iteml.getNode) {
            temptreeData = this.getShowItem(tempResult, iteml.item.domid, iteml.item.pid);
            this.setState({ treeData: temptreeData });
          }
        });
      });
    }
  }
  shouldComponentUpdate() {
    return true;
  }
  componentWillUnmount() {
  // 组件卸载时一般清理一些状态
  }
  onSearch= (value) => {
    const { docAddStore } = this.props;
    const { setsearchValue } = docAddStore;
    setsearchValue(value);
  }
  getItem=(item, selected) => {
    let getNode = false;
    let returnItem = [];
    let sel = selected[0] || '';
    if (item.domid === sel) {
      getNode = true;
      returnItem.push({ item, getNode });
    } else {
      returnItem.push({ item, getNode });
      if (item.haschild) {
        item.childs.forEach((i) => {
          let tempResult = [];
          tempResult = this.getItem(i, selected);
          returnItem = returnItem.concat(tempResult);
        });
      }
    }
    return returnItem;
  }
  getShowItem=(tempResult, domid, pid) => {
    let result = [];
    let temp = [];
    tempResult.forEach((item) => {
      if (item.item.domid === domid) {
        result.unshift(item.item);
      }
    });
    tempResult.forEach((item) => {
      if (item.item.key === pid) {
        result.unshift(item.item);
        temp = [];
        if (pid !== '') {
          temp = this.getShowItem(tempResult, item.item.domid, item.item.pid);
          temp.pop();
          result = temp.concat(result);
        }
      }
    });
    return result;
  }
  getExpandedKey() {
    const { docAddStore } = this.props;
    const { treeDatas, selectedDomId, setExpandedKey } = docAddStore;
    let tempExpandedkey = [];
    let selectedDomID = toJS(selectedDomId);
    if (selectedDomID.length !== 0) {
      treeDatas.forEach((item) => {
        if (item.domid === selectedDomID[0]) {
          tempExpandedkey.push(item.domid);
        } else if (item.haschild) {
            const tempResult = this.getItem(item, selectedDomID);
            tempResult.forEach((iteml) => {
              if (iteml.getNode) {
                const temptreeData = this.getShowItem(tempResult, iteml.item.domid, iteml.item.pid);
                temptreeData.forEach((i) => {
                  tempExpandedkey.push(i.domid);
                });
              }
            });
          }
      });
      setExpandedKey(tempExpandedkey);
    }
  }
  render() {
    const { docAddStore } = this.props;
    const { setSelectedDomId, searchValue, setsearchValue, clearSelectedDomId
    	, setKey, setIsTreeNodeEmpty } = docAddStore;
    const { treeData } = this.state;
    let Content = treeData.map(item => (
        <div style={{ display: 'inline-block' }}>
          <div className="add-addtab—subroute">
            <div className="add-addkey">{item.domid}</div>
              <span className="add-addtabtext"
                onClick={() => {
                setSelectedDomId(item.domid);
                setKey([item.key]);
                setsearchValue('');
                this.getExpandedKey();
                setIsTreeNodeEmpty(false);
              }}
              >{item.name}</span>
            </div>
          <div style={{ display: 'inline-block', paddingTop: '1px' }}>
            <span className="icon-coms-organization-right add-addtabicon-caretright" />
          </div>
        </div>
      ));
    Content = Content.slice(0, Content.length - 1);
    const temp = () => {
      if (treeData.length > 0) {
        return (
          <div className="add-addtab—subroute">
            <div className="add-addkey">{treeData[treeData.length - 1].domid}</div>
            <span className="add-addtabtext"
              onClick={() => {
              setSelectedDomId(treeData[treeData.length - 1].domid);
              setKey([treeData[treeData.length - 1].key]);
              setsearchValue('');
              this.getExpandedKey();
              setIsTreeNodeEmpty(false);
            }}
            >{treeData[treeData.length - 1].name}</span>
          </div>
        );
      }
    };
    Content.push(temp());
    return (
      <div className="add-addtab">
        <div className="add-addtabroute">
          <div className="add-addtab—subroute add-icon-home">
            <span className="icon-coms-LargeArea add-addtabicon-home"
              onClick={() => {
              clearSelectedDomId();
              setKey([]);
              setsearchValue('');
              this.getExpandedKey();
              if (treeData.length !== 0) setIsTreeNodeEmpty(false);
              else setIsTreeNodeEmpty(true);
            }}
            />
          </div>
          {Content}
        </div>
        <div className="add-addtabsearch">
          <WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@n5rhre`} onSearch={this.onSearch}
            value={searchValue}
            onSearchChange={(value) => {
 setsearchValue(value); 
}}
          />
        </div>
      </div>
    );
  }
}
export default AddTab;
